import { ProductImg } from '@/components/product/ProductImg';
import { splitPrice } from '@/utils/customModule';
import { goProductDetail } from '@/utils/index';
import { View } from '@tarojs/components';
import React from 'react';
import Empty from '../Empty';
import styles from './index.module.scss';
import ViewMore from './ViewMore';

const SplitPrice = ({ price }) => {
  const [priceLeft, priceRight] = splitPrice(price);

  return (
    <View className="sale-price customePageStyle">
      <View className="price-0">¥</View>

      <View className="price-1">{priceLeft}</View>

      <View className="price-2">.{priceRight}</View>
    </View>
  );
};

const Product = ({
  addCartText,
  product,
  product: { releaseId, url, cost, price, title, totalSales, totalStock } = {},

  isShowSalePrice,
  isShowSoldOut,

  isShowGoodsSaleNum,
  isStart,
}) => {
  return (
    <View className={styles.Product} onClick={() => goProductDetail({ id: releaseId, ...product })}>
      <ProductImg
        className="img"
        url={url}
        isSoldOut={isShowSoldOut && totalSales === totalStock}
      />

      <View className="product-info">
        <View className="title omit-1">{title}</View>

        {isShowGoodsSaleNum && isStart && (
          <>
            <View className="progress customePageStyleBg20">
              <View
                className="inner customePageBackgroundStyle"
                style={{
                  width: `${(totalSales / totalStock) * 100}%`,
                }}
              ></View>
            </View>

            <View className="sales">
              {totalSales >= totalStock ? '商品被抢光了~' : `已抢${totalSales}件`}
            </View>
          </>
        )}

        {isShowGoodsSaleNum && !isStart && (
          <View className="not-start">
            <View className="tag customePageStyleBg15">
              <View className="txt customePageStyle">限时抢</View>
            </View>
          </View>
        )}

        <View className="line">
          <View className="price">
            <SplitPrice price={price} />

            {isShowSalePrice && <View className="underline-price">¥{cost}</View>}
          </View>

          <View className="cart customePageBackgroundStyle">
            <View className="txt">{addCartText}</View>
          </View>
        </View>
      </View>
    </View>
  );
};

const Products = ({
  activity,
  products,
  isShowSalePrice,
  isShowSoldOut,
  isShowGoodsSaleNum,
  isStart,
}) => {
  if (!products) {
    return <Empty txt="" />;
  }

  if (!products.length) {
    return <Empty />;
  }

  return (
    <View className={styles.Products}>
      {products?.map((product) => {
        return (
          <Product
            key={product.releaseId + '|' + product.variantId}
            {...{
              addCartText: activity?.addCartText,
              product,
              isShowSalePrice,
              isShowSoldOut,

              isShowGoodsSaleNum,
              isStart,
            }}
          />
        );
      })}

      <ViewMore {...{ activity, products }} />
    </View>
  );
};

export default Products;
